<script>
import TreeSearch from "./TreeSearch.vue";
import CustomTableGrid from "./CustomTableGrid.vue";

export default {
  components: {
    TreeSearch,
    CustomTableGrid,
  },
  data() {
    return {
      selectedKey:null
    };
  },
  methods:{
    onSelect(key){
      this.selectedKey = key
    }
  }
};
</script>

<template>
  <main class="flex flex-row h-full">
    <div class="left-panel flex-shrink-0 h-full">
      {{ selectedKey }}
      <TreeSearch @select="onSelect"></TreeSearch>
    </div>
    <div class="right-panel flex-1 h-full w-0">
      <CustomTableGrid></CustomTableGrid>
    </div>
  </main>
</template>

<style scoped>
.left-panel {
  width: 280px;
  border-right: 2px dashed red;
  box-sizing: border-box;
  padding-right: 10px;
}
</style>
